<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="icon" href="./static/index/image/icon/page_login.png" type="image/x-icon"/>
    <link rel="stylesheet" href="./static/dependence/loginAndRegister/css/diquick.css">
    <script src="./static/dependence/vue/vue.js"></script>
    <script src="./static/dependence/reqwest/reqwest.js"></script>
    <script src="./static/dependence/loginAndRegister/js/diquick.js"></script>

    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    <title>Family</title>
</head>
<body>
<div id="app">
<!--    当用户没有加入的家庭时，允许它创建或申请加入家庭-->
    <div id="no-family" v-if="!hasFamily">
        <p>您还没有加入任何家庭，宁可以选择 加入家庭 或 创建家庭</p>
        <div>申请加入家庭</div>
        <div class="row">
            <div class="col-lg-6">
                <div class="input-group">
                    <span class="input-group-btn">
                        <button class="btn btn-default" type="button" @click="application">申请加入</button>
                    </span>
                    <input type="text" class="form-control" v-model="applicationFamilyID" placeholder="Search for...">
                </div><!-- /input-group -->
            </div>
            <button class="btn btn-default" type="button" @click="application">创建家庭</button>
        </div>
    </div>
    <div id="family-info" v-else>
        <div><h1>{{familyData.family_name}}</h1></div>
        <h2>家庭成员</h2>
        <ul class="box-array list4">
            <li>{{familyData.family_member.parent1}}</li>
            <li>{{familyData.family_member.parent2}}</li>
            <li>{{familyData.family_member.members3}}</li>
            <li>{{familyData.family_member.members4}}</li>
            <li>{{familyData.family_member.members5}}</li>
            <li>{{familyData.family_member.members6}}</li>
            <li>{{familyData.family_member.members7}}</li>
            <li>{{familyData.family_member.members8}}</li>
        </ul>
    </div>
</div>
<script src="viewModel/family.js"></script>
</body>
</html>